---
import PageLayout from "@/layouts/Base";
import BlogPostPreview from "@/components/BlogPostPreview";
import SocialList from "@/components/SocialList";
import { sortMDByDate } from "@/util";
import type { Post } from "@/types";

const meta = {
	title: "Astro Cactus",
	description: "The perfect starter for your perfect blog.",
};

const MAX_POSTS = 10;
const allPosts = await Astro.glob<Post>("./posts/*.mdx");
const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS);
---

<PageLayout meta={meta}>
	<section>
		<h1 class="mb-6 title">您好，Voyaged,做个小测试</h1>
		<p class="mb-4">
			He is a kindling, and the whole world is the firewood prepared for him. The world exists to be ignited by him.
		</p>
		<SocialList />
	</section>
	<section aria-label="Blog post list" class="mt-16">
		<h2 class="mb-4 text-xl title">记录列表</h2>
		<ul class="space-y-4 sm:space-y-2">
			{
				allPostsByDate.map((p) => (
					<li class="flex flex-wrap items-center gap-x-2 [&_q]:w-full">
						<BlogPostPreview post={p} as="h2" />
					</li>
				))
			}
		</ul>
	</section>
	<section class="mt-16">
		<h2 class="mb-4 text-xl title">Small universe</h2>
		<!-- <audio src="/src/assets/hope.mp3" autoplay></audio> -->
		<!-- <ul class="space-y-4 sm:space-y-2">
			<li>
				<a
					href="https://astro.build"
					target="_blank"
					rel="noopener noreferrer"
					class="inline-block cactus-link"
					>Astro
				</a>:
				<p class="inline-block sm:mt-2">Build fast websites, faster.</p>
			</li>
			<li>
				<a
					href="https://docs.astro.build/en/guides/integrations-guide/image/"
					target="_blank"
					rel="noopener noreferrer"
					class="inline-block cactus-link"
					>@astro/image
				</a>:
				<p class="inline-block sm:mt-2">
					An Astro integration for optimising images in Astro projects.
				</p>
			</li>
			<li>
				<a
					href="https://tailwindcss.com"
					target="_blank"
					rel="noopener noreferrer"
					class="inline-block cactus-link"
					>Tailwind CSS
				</a>:
				<p class="inline-block sm:mt-2">
					Rapidly build modern websites without ever leaving your HTML.
				</p>
			</li>
			<li>
				<a
					href="https://mdxjs.com/"
					target="_blank"
					rel="noopener noreferrer"
					class="inline-block cactus-link"
					>MDX
				</a>:
				<p class="inline-block sm:mt-2">Markdown for the component era.</p>
			</li>
		</ul> -->
	</section>
</PageLayout>
